<template>
  <div class="loginview">
    <NavBarView />
    <div class="login">
      <h1>密码登录</h1>
      <div class="login-form">
        <!-- 手机号 -->
        <van-form>
          <van-field
            v-model="phone"
            type="tel"
            placeholder="请输入手机号"
            maxlength="11"
            :rules="rules"
          />
          <!-- 密码 -->
          <van-field
            v-model="password"
            type="tel"
            placeholder="请输入密码"
            maxlength="12"
            minlength="3"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #button>
              <span size="small" type="primary" @click="gotoForget">
                忘记密码
              </span>
            </template>
          </van-field>
        </van-form>
        <!-- 协议 -->
        <div class="agreement">
          <van-checkbox v-model="checked" icon-size="14px" shape="square">
            未注册的手机号验证通过后将自动注册账号,我已阅读并同意签署
            <span>《用户协议》</span>
            <span>《隐私政策》</span>
          </van-checkbox>
        </div>
        <div
          @click="gotoFace"
          style="
            display: flex;
            justify-content: end;
            align-items: center;
            padding-right: 20px;
          "
        >
          <img src="../../assets/face.png" alt="" />
          <span style="margin-left: 10px; font-size: 14px; color: #1989fa"
            >面部识别</span
          >
        </div>
        <!-- 登录按钮 -->
        <van-button
          type="primary"
          block
          style="margin-top: 10px"
          @click="throttledPhoneLogin"
          >登录</van-button
        >
      </div>
      <ThirePartyLogin />
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref } from "vue";
import NavBarView from "./components/NavBarView.vue";
import { useRoute, useRouter } from "vue-router";
import instance from "@/http/index";
import { psdLogin } from "./services/psdLogin";
import ThirePartyLogin from "./components/ThirePartyLogin.vue";
import { throttle } from "./utils/debounce";
import { ElMessage } from "element-plus";

const router = useRouter();
const phone = ref<string>("");
const password = ref<string>("");
const checked = ref<boolean>(false);

const rules = [
  { required: true, message: "请填写手机号" },
  { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确" },
];

const PsdLogin = async () => {
  console.log("psdLogin");
  if (checked.value) {
    const res: any = await psdLogin({
      phone: phone.value,
      password: password.value,
    });
    console.log(res);
    if (res.code === 200) {
      ElMessage.success(res.msg);
      localStorage.setItem("accessToken", res.accessToken);
      localStorage.setItem("refreshToken", res.refreshToken);
      localStorage.setItem("user", JSON.stringify(res.user));
      router.push("/me");
    } else {
      ElMessage.error(res.msg);
    }
  } else {
    ElMessage.error("请勾选协议");
  }
};
const throttledPhoneLogin = throttle(PsdLogin, 3000);

const gotoFace = () => {
  router.push("/faceLogin");
};

const gotoForget = () => {
  if (phone.value != "") {
    router.push("/forgotPsd?phone=" + phone.value);
  }else{
    ElMessage.error("请输入手机号");
  }
};
</script>
  
  <style scoped lang="scss">
.loginview {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .login {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 0% 20px;
    margin-top: 46px;
    box-sizing: border-box;
    .login-form {
      margin-top: 6ex;
      .van-field {
        margin-bottom: 20px;
      }
    }
    h1 {
      font-weight: 700;
      margin-bottom: 20px;
    }
    .agreement {
      margin-bottom: 20px;
      span {
        color: #1989fa;
      }
    }
    .other-login {
      margin-top: 60px;
    }
  }
}
</style>